<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/index.css" />
</head>

<body>

    <header id="head">
        <!-- 页面头 -->
        <div class="head">
            <div class="center clearfix">
                <div class="left">好东西</div>

                <div class="right">
                    <ul>
                        <li><a class="noborder" href="">登录</a></li>
                        <li><a class="noborder margin10" href="">注册</a></li>
                        <li><a href="">严选态度</a></li>
                        <li><a href="">企业采购</a></li>
                        <li class="customer">
                            <a href="">客服服务</a>
                            <ul>
                                <li>
                                    <a href="">帮助中心</a>
                                </li>
                                <li>
                                    <a href="">在线客服</a>
                                </li>
                                <li class="phone">
                                    <a href="">电话客服</a>
                                    <div>
                                        <p>400-3333-000</p>
                                        <p>9:00-22:00</p>
                                    </div>
                                </li>
                                <li>
                                    <a class="noborder" href="">商务合作</a>
                                </li>
                            </ul>
                        </li>
                        <li class="down">
                            <a href="">下载 app</a>
                            <div>
                                <img src="./images/icon_p2w.png" alt="" srcset="">
                                <span>扫一扫,添加好友</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>

        </div>

        <!-- 搜多部分 -->
        <div class="search">
            <div class="center clearfix">
                <!-- 增加权重 -->
                <h1> <a href=""><img src="./images/icon_lock.png" alt="摸鱼鸭"></a></h1>
                <div class="searchBox right">
                    <input type="text" placeholder="请输入关键词">
                    <!-- 当点击的时候不会出现#号  -->
                    <a href="javascript:;">搜索</a>
                </div>
            </div>

        </div>
        <!-- 导航 -->
        <div class="nav" id="navFix">
            <div class="center clearfix">
                <a class="logo" href=""> <img src="./images/icon_lock.png" alt="哈哈"></a>
                <ul class="navBar">
                    <li class="active"><a href="#">首页</a></li>
                    <li><a href="#">居家</a></li>
                    <li><a href="#">居家</a></li>
                    <li><a href="#">居家</a></li>
                    <li><a href="#">居家</a></li>
                    <li><a href="#">居家</a></li>
                    <li><a href="#">居家</a></li>
                    <li><a href="#">居家</a></li>
                    <li><a href="#">居家</a></li>
                    <li class="separate">|</li>
                    <li><a href="#">居家</a></li>
                    <li><a href="#">居家</a></li>
                </ul>

                <!-- 购物车 -->
                <div class="cartWrap right">
                    <i>0</i>

                    <!-- 弹出框 -->
                    <div class="cart">
                        <div class="list">
                            <ul>
                                <li>
                                    <a href="" class="img"><img src="./images/icon_p2x.png" alt=""/></a>
                                    <div class="message">
                                        <p><a href="#">产品标题</a></p>
                                        <p>百度 Lx 1</p>
                                    </div>
                                    <div class="price">$617.00</div>
                                    <div class="colse">X</div>
                                </li>
                                <li>
                                    <a href="" class="img"><img src="./images/icon_p2x.png" alt=""/></a>
                                    <div class="message">
                                        <p><a href="#">产品标题</a></p>
                                        <p>百度 Lx 1</p>
                                    </div>
                                    <div class="price">$617.00</div>
                                    <div class="colse">X</div>
                                </li>
                                <li>
                                    <a href="" class="img"><img src="./images/icon_p2x.png" alt=""/></a>
                                    <div class="message">
                                        <p><a href="#">产品标题</a></p>
                                        <p>百度 Lx 1</p>
                                    </div>
                                    <div class="price">$617.00</div>
                                    <div class="colse">X</div>
                                </li>
                                <li>
                                    <a href="" class="img"><img src="./images/icon_p2x.png" alt=""/></a>
                                    <div class="message">
                                        <p><a href="#">产品标题</a></p>
                                        <p>百度 Lx 1</p>
                                    </div>
                                    <div class="price">$617.00</div>
                                    <div class="colse">X</div>
                                </li>
                            </ul>
                            <!-- 侧边滚动条 -->
                            <div class="scollBar">
                                <span class="topBtn"></span>
                                <div class="slideWarp">
                                    <div class="slide"></div>
                                </div>
                                <span class="bottomBtn"></span>
                            </div>
                        </div>
                        <div class="total">
                            商品合集: <span> $6767.00</span><a href="#">去购物车结算</a>
                        </div>
                    </div>

                </div>

                <div class="login right">
                    <a href="#">登录</a><a href="#">注册</a>
                </div>
            </div>

            <div class="subNav">
                <ul>
                    <li><a href="#"><img src="./images/icon_p2img.png" alt="">测试 1</a></li>
                    <li><a href="#"><img src="./images/icon_p2img.png" alt="">测试 1</a></li>
                    <li><a href="#"><img src="./images/icon_p2img.png" alt="">测试 1</a></li>
                    <li><a href="#"><img src="./images/icon_p2img.png" alt="">测试 1</a></li>
                    <!-- <li><a href="#"><img src="./images/icon_p2img.png" alt="">测试 1</a></li>
                    <li><a href="#"><img src="./images/icon_p2img.png" alt="">测试 1</a></li>
                    <li><a href="#"><img src="./images/icon_p2img.png" alt="">测试 1</a></li>
                    <li><a href="#"><img src="./images/icon_p2img.png" alt="">测试 1</a></li>
                    <li><a href="#"><img src="./images/icon_p2img.png" alt="">测试 1</a></li>
                    <li><a href="#"><img src="./images/icon_p2img.png" alt="">测试 1</a></li> -->
                </ul>

                <ul style="display: none;">
                    <li><a href="#"><img src="./images/icon_p2img.png" alt="">测试 1</a></li>
                    <li><a href="#"><img src="./images/icon_p2img.png" alt="">测试 1</a></li>
                    <li><a href="#"><img src="./images/icon_p2img.png" alt="">测试 1</a></li>
                     <li><a href="#"><img src="./images/icon_p2img.png" alt="">测试 1</a></li>
                    <!--<li><a href="#"><img src="./images/icon_p2img.png" alt="">测试 1</a></li>
                    <li><a href="#"><img src="./images/icon_p2img.png" alt="">测试 1</a></li>
                    <li><a href="#"><img src="./images/icon_p2img.png" alt="">测试 1</a></li>
                    <li><a href="#"><img src="./images/icon_p2img.png" alt="">测试 1</a></li>
                    <li><a href="#"><img src="./images/icon_p2img.png" alt="">测试 1</a></li>
                    <li><a href="#"><img src="./images/icon_p2img.png" alt="">测试 1</a></li> -->
                </ul>
            </div>
        </div>
    </header>

    <!-- banner -->
    <div class="banner">
        <div class="bannerPic" id="bannerPic">
            <!-- 放置图片 -->
            <div class="carouseImgCon">
                <a href=""><img src="./images/icon_organize.png" alt="" style="opacity: 1;"></a>
                <a href=""><img src="./images/icon_x2p.png" alt=""></a>
                <a href=""><img src="./images/icon_p2w.png" alt=""></a>
                <a href=""><img src="./images/icon_p2w.png" alt=""></a>
                <a href=""><img src="./images/icon_p2s.png" alt=""></a>
            </div>

            <!-- 左箭头 -->
            <div class="prev"><</div>
            <div class="next">></div>
            <!-- 原点 -->
            <div class="circle">
                <span class="active"></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>

            </div>

        </div>
    </div>



    <!-- 品牌制造商 -->
    <section id="brand">
        <header class="brandHeader clearfix">
            <div class="left">
                <h3>商品制造</h3><span>工厂直销,一步到位</span>
            </div>
            <div class="right">
                <a href="#">更多品牌></a>
            </div>
        </header>
        <div class="bImg">
            <div class="bBox">
                <h4>商品制造</h4>
                <span>56元</span>
                <a href="#" class="scaleImg"><img src="./images/icon_x2p.png" alt=""></a>
            </div>
            <div class="bBox">
                <h4>商品制造</h4>
                <span>56元</span>
                <a href="#" class="scaleImg"><img src="./images/icon_x2p.png" alt=""></a>
            </div>
    
            <div class="bBox">
                <div >
                    <h4>商品制造</h4>
                    <span>56元</span>
                    <a href="#" class="scaleImg"><img src="./images/icon_x2p.png" alt=""></a>
                </div>
                <div >
                    <h4>商品制造</h4>
                    <span>56元</span>
                    <a href="#" class="scaleImg"><img src="./images/icon_x2p.png" alt=""></a>
                </div>
            </div>
        </div>
        


    </section>
</body>

</html>